<!-- 系统 -->
<template>
  <div class="page-main-body-box">
    <div class="meedu-main-body">
      <div class="float-left mb-30">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click.stop="goBack"><i class="el-icon-back"></i> 返回</div>
          <div class="line"></div>
          <div class="name">编辑管理员</div>
        </div>
        <button type="button" class="el-button el-button--primary" @click.stop="handleadd">
          <span>添加</span>
        </button>
      </div>
      <!--表格 组件 -->
      <el-table :data="tableData" style="width: 1240" v-if="tableData">
        <el-table-column prop="id" label="ID" width="120"> </el-table-column>
        <el-table-column prop="display_name" label="角色名" width="120"> </el-table-column>
        <el-table-column prop="slug" label="Slug" width="220"> </el-table-column>
        <el-table-column prop="description" label="描述" width="550"> </el-table-column>
        <el-table-column prop="operate" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="handleEdit(scope.$index, tableData)"
              >编辑</el-button
            >
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--表格 组件 -->
      <!--分页 组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!--分页 组件 -->
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      tableData: [],
      perPage: 0,
      currentPage4: 0,
      total: 0,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goBack: function () {
      // window.history.go(-1)
      // 表示返回上一页
      this.$router.go(-1);
    },
    //添加
    handleadd() {
      this.$router.push({
        path: "/SystemAdministrator/adminroles/create",
      });
    },
    //编辑
    handleEdit(index, id) {
      this.$router.push({
        path: "/SystemAdministrator/adminroles/update",
        query: {
          id: id[index].id,
        },
      });
    },
    //删除
    deleteRow(index, rows) {
      this.$confirm("确认操作？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确定按钮的操作
          if (this.loading) {
            return;
          }
          this.$request
            .delete(`administrator/${rows[index].id}`)
            .then((res) => {
              // console.log(res);
              this.loading = false;
              this.$message.success("删除成功");
              // this.paginationReset();
              rows.splice(index, 1);
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        })
        .catch(() => {
          //点击删除按钮的操作
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      let res1 = await this.$request.get(`/administrator_role?page=${val}`);
      console.log(res1.data);
      this.tableData = res1.data.data;
      this.currentPage4 = res1.data.current_page;
      this.perPage = res1.data.per_page;
      this.total = res1.data.total;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 1. 通过请求获取首页数据
    // const res = await this.$request.get("/administrator_role", {
    //   params: {
    //     page: 1,
    //     size: 10,
    //     sort: "id",
    //     order: "desc",
    //   },
    // });
    let res = await this.$request.get(`/administrator_role?page=1`);
    console.log(res.data);
    this.tableData = res.data.data;
    // console.log(this.tableData);
    this.currentPage4 = res.data.current_page;
    // console.log(this.currentPage4);
    this.perPage = res.data.per_page;
    // console.log(this.perPage);
    this.total = res.data.total;
    // console.log(this.total);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.page-main-body-box {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  // padding: 20px 5px 20px 20px;
  // overflow-y: auto;
  background-color: #f1f2f9;
  .meedu-main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .float-left.mb-30 {
      margin-bottom: 30px;
      width: 100%;
      height: auto;
      float: left;
      // display: flex;
      // align-items: center;
      .back-bar-box.mb-30 {
        display: flex;
        align-items: center;
        .btn-back {
          font-size: 14px;
          font-weight: 400;
          color: #333;
          cursor: pointer;

          .el-icon-back {
            font-family: element-icons !important;
            //   speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
          }
        }

        .line {
          width: 1px;
          height: 14px;
          background-color: #d8d8d8;
          margin-right: 15px;
          margin-left: 15px;
        }

        .name {
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
      }

      .el-button.el-button--primary {
        font-weight: 400;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        // color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
      }
    }

    // 表格组件
    /deep/.el-table th.el-table__cell {
      background: #f1f2f9;
    }
    /deep/.el-table .cell {
      color: #333;
    }

    //分页组件
    /deep/.el-pagination {
      margin-top: 30px;
      text-align: center;
    }
  }
}
</style>
